

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OCR Demo</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>

<body>
    <h1 style="text-align:center"> OCR </h1>
    <form action="{{ url_for('uploadimage') }}" method="POST" enctype="multipart/form-data" id='formBox'>
        <div align="center">
            <input type="submit" value="Upload" onclick="return typeCheck('chooseImage')">
                        <br />
            <p style="color:red;font-size:16px;"> {{ info }} <p>
        </div>
        <div align="center">
            <input type="file" id="chooseImage" name="filechoose" accept="image/jpg,image/jpeg,image/png"
                   style="display:none" onchange="imgChange(event,'img')">
            <img id="img"  width="500px" height="500px" src={{ imgPath }}
                 onclick="openDialog('chooseImage')" style="margin-top:5px">

        </div>
    </form>
</body>

<script type="text/javascript">
    function openDialog(id) {
            document.getElementById(id).click();
    }
    function imgChange(e, imageid) {
            let reader = new FileReader();
            reader.onload = (function (file) {
                return function (e) {
                    document.getElementById(imageid).src = this.result;
                };
            })(e.target.files[0]);
            reader.readAsDataURL(e.target.files[0]);
    }
    function typeCheck(imageid) {
        let image = document.getElementById(imageid).value;
        let filePath = image,
                fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();

        if( !fileFormat.match(/.png|.jpg|.jpeg/) ) {
            alert('上传错误,文件格式必须为：png/jpg/jpeg');
            return false
        }
        return true
    }
</script>
</html>
